<template>
	<view>
		<image class="page-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-wl-1.png"
			mode="widthFix"></image>
		<!-- 自定义头部start -->
		<customHeader title="乡村文旅"></customHeader>
		<!-- 自定义头部end -->
		<view class="page-wrap">
			<u-dropdown active-color="#07C160">
				<u-dropdown-item v-model="value" :title="options[value].label" :options="options"
					@change='onChange'></u-dropdown-item>
			</u-dropdown>

			<!-- <scroll-view scroll-y class="list"> -->
			<view scroll-y class="list">
				<template v-for="item in list">
					<navigator :url="`/pages/vallige/detail?id=${item.id}`" class="item" :key="item.id">
						<u-image border-radius="20rpx"
							:src="item.thumbnail == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-wl-2.png' : item.thumbnail"
							width="172rpx" height="172rpx"></u-image>
						<div class="right">
							<view class="u-flex">
								<text class="u-font-32 blod u-m-r-20">{{ item.title }}</text>
								<u-rate :count="5" :current="item.rating" active-color="#FF8B35"
									inactive-color="#E6E6E6" gutter="10rpx" :disabled="true"></u-rate>
							</view>
							<view class="u-flex u-font-24 u-tips-color u-m-t-15"><altitude :lat="item.latitude" :lng="item.longitude"></altitude> | {{ item.area }}</view>
							<view class="u-font-24 u-content-color u-m-t-20 u-line-2" style="width:500rpx">
								<rich-text :nodes="item.content"></rich-text>
							</view>
							<image class="icon-location"
								src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png"
								mode="widthFix"></image>
						</div>
					</navigator>
				</template>
			</view>
			<!-- </scroll-view> -->
			<navigator url="/pages/vallige/detail" class="tj"></navigator>
		</view>
	</view>
</template>

<script>
	import altitude from '@/components/altitude.vue'
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader,altitude
		},
		data() {
			return {
				value: 0,
				options: [{
						label: '余江全域',
						value: 0,
					},
					{
						label: '锦江镇',
						value: 1,
					},
					{
						label: '潢溪镇',
						value: 2,
					},
					{
						label: '中童镇',
						value: 3,
					},
					{
						label: '马荃镇',
						value: 4,
					},
					{
						label: '画桥镇',
						value: 5,
					},
					{
						label: '春涛镇',
						value: 6,
					},
					{
						label: '平定乡',
						value: 7,
					},
					{
						label: '杨溪乡',
						value: 8,
					},
					{
						label: '洪湖乡',
						value: 9,
					},
					{
						label: '黄庄乡',
						value: 10,
					},
					{
						label: '刘家站乡',
						value: 11,
					},
					{
						label: '邓埠街道',
						value: 12,
					},
					{
						label: '生态林场总场',
						value: 13,
					},
					{
						label: '水产粮种场',
						value: 14,
					},
					{
						label: '龙岗办事处',
						value: 15,
					},
				],
				list: [],
				page: 1,
				isNext: true,
				area: '',
			}
		},
		onLoad() {
			// 乡村文旅列表
			this.get_travel_cultureList()
		},
		onReachBottom() {
			this.get_travel_cultureList()
		},
		methods: {
			// 乡村文旅列表
			get_travel_cultureList() {
				if (!this.isNext) return;
				
				this.$http({
					url: this.api.travel_cultureList,
					method: 'GET',
					data: {
						area: this.area,
						page: this.page
					}
				}).then(res => {
					if (res.code == 1) {	
						this.isNext = res.data.isNext
						this.page++
						res.data.list.forEach(e => {
							this.list.push(e)
						})
					}
				})
			},

			onChange(e) {
				if (e == 0) {
					this.area = ''
				} else {
					this.area = this.options[e].label
				}
				
				this.page = 1
				this.isNext = true
				this.list = []
				this.get_travel_cultureList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 480rpx;
		z-index: 1;
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	/deep/ .u-dropdown {
		width: 750rpx !important;
		margin-left: -30rpx;

		.u-dropdown__content {
			overflow: auto;
		}
	}

	/deep/ .u-dropdown__menu__item {
		justify-content: flex-start !important;
		font-size: 28rpx;
		font-weight: 700;
		padding-left: 30rpx;
	}

	.list {
		height: calc(100vh - 580rpx);

		.item {
			position: relative;
			display: flex;
			padding: 40rpx 0;
			border-bottom: 1px solid #E6E6E6;

			.right {
				margin-left: 30rpx;

				.icon-location {
					position: absolute;
					top: 40rpx;
					right: 0;
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>